<script lang="ts" setup>
import IconFont from '@/assets/icons/iconFont'

interface CommonOptions {
  icon: string
  preTitle: string
  suffixTitle: string
}

interface ButtonConfig {
  buttonIcon: string
  tip: string
  datePicker: {
    hasTime: boolean
    afterTime?: number
    datePickerIcon: string
    datePickerTitle: string
  }
  commonOptions: CommonOptions[]
}

const settingConfig = defineProps<ButtonConfig>()

const suffixTime = (id: number) => {
  if (settingConfig.datePicker.hasTime)
    return id ? ',9:00' : settingConfig.datePicker.afterTime + ':00'
  else return ''
}

const emit = defineEmits<{
  (e: 'select', value: number, index: number): void
}>()

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const selectOption = (value: unknown, _ev: Event) => {
  emit(
    'select',
    timeParse(settingConfig.datePicker.hasTime, value as number),
    settingConfig.datePicker.hasTime ? 1 : 0
  )
}

// eslint-disable-next-line @typescript-eslint/no-unused-vars
const selectDate = (_value: unknown, date: Date, _dateString: string) => {
  emit('select', Math.floor(date.getTime() / 1000), settingConfig.datePicker.hasTime ? 1 : 0)
}

/**
 *
 * @param isButton2 是否是第二个按钮
 * @param option 选项
 * @description 计算时间戳
 */
function timeParse(isButton2: boolean, option: number): number {
  const now = new Date()

  /**
   * 清除分,秒
   */
  const clearTime = () => now.setTime(Math.floor(now.getTime() / (1000 * 60 * 60)) * 1000 * 60 * 60)

  if (option === 2) {
    now.setHours(9)
    clearTime()
    now.setDate(now.getDate() + ((8 - now.getDay()) % 7))
  } else if (isButton2) {
    clearTime()
    now.setHours(option === 1 ? 9 : now.getHours() + 3)
    now.setDate(now.getDate() + option)
  } else {
    now.setDate(now.getDate() + option)
  }
  return Math.floor(now.getTime())
}
</script>

<template>
  <a-dropdown trigger="click" @select="selectOption">
    <a-tooltip background-color="#ebeef5" mini>
      <span class="setting-btn">
        <IconFont :type="settingConfig.buttonIcon" :size="20" />
      </span>
      <template #content>
        <p class="tips">
          {{ $t(settingConfig.tip) }}
        </p>
      </template>
    </a-tooltip>
    <template #content>
      <a-doption v-for="(item, index) of settingConfig.commonOptions" :key="index" :value="index">
        <template #icon>
          <IconFont :type="item.icon" />
        </template>
        <p class="option dark:text-light-700">
          <span>{{ $t(item.preTitle) }}</span>
          <span>{{ $t(item.suffixTitle) + suffixTime(index) }}</span>
        </p>
      </a-doption>
      <li class="date">
        <span class="mr-3 inline-block leading-9">
          <IconFont class="dark:fill-light-700" :type="settingConfig.datePicker.datePickerIcon" />
        </span>
        <a-date-picker
          position="top"
          format="yyyy-MM-dd hh:mm"
          :show-time="settingConfig.datePicker.hasTime"
          show-confirm-btn
          @ok="selectDate"
        >
          <p class="flex-grow dark:text-light-700">
            {{ $t(settingConfig.datePicker.datePickerTitle) }}
          </p>
        </a-date-picker>
      </li>
    </template>
  </a-dropdown>
</template>

<style scoped>
.setting-btn {
  @apply rounded-md my-auto h-11 px-2 leading-11 inline-block;
  @apply hover:bg-light-200 dark:hover:bg-gray-700;
}

.date {
  @apply flex text-sm px-3 leading-9;
  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
}
</style>
